<!-- 





    弃用





 -->

<template>
    <div class="box-view screen-all flex">
        <span>{{ modA +  modB }}</span>
        <span>{{ '1 ' + modA }}</span>
        <span>{{ `1 + 1 = ${modA}` }}</span>
    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, onMounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {

        type nameType = string
        type sexType = string|number
        type ageType = number

        interface userType {
            name: nameType,
            sex?: '男'|'女',
            age?: ageType,
        }

        /**
         * 普通传参
         */
        const fun1 = (name: nameType, sex?: sexType, age: ageType = 18) => {

            console.log('fun1 params = ', name, sex, age);
        }

        /**
         * 对象传参，并解构
         * @param params 
         */
        const fun2 = (params: userType) => {
            let {
                name,
                sex,
                age = 18,
            } = { ...params };

            console.log('fun2 params = ', name, sex, age);
        }

        /**
         * 模拟调用接口
         * @param state true=接口调用成功  false=接口调用失败 
         */
        const requestObj = (state: boolean): Promise<any> => {
            return new Promise((resolve, reject) => {
                if(state){
                    resolve({ status: 1, msg: '成功', data: 'success' });
                }else{
                    reject({ status: 0, msg: '失败', data: 'error' });
                }
            });
        }

        // 模板字符串

        const modA = ref(2);
        const modB = ref(3);


        // 对象、数组 处理（链式操作）
        const arrayData = reactive({
            list1: [
                {name: '小明', age: 16},
                {name: '小红', age: 17},
                {name: '小蓝', age: 18},
            ],
        });

        const getNameList = (list: Array<any>): Array<string> => {
            return list.map((item) => item.name);
        }
        const getNames = (list: Array<any>): string => {
            return list.map((item) => item.name).join('/');
        }

        onMounted(() => {

            // 普通方法传参
            fun1('小明', 1);
            // 使用对象传参
            fun2({ name: '小明', sex: '男' });

            requestObj(true)
                .then((res) => {
                    console.log('requestObj 1 =', res.status, res.msg, res.data);
                });

            requestObj(true)
                .then(({ status, msg, data }) => {
                    console.log('requestObj 2 =', status, msg, data);
                });

            let list1 = getNameList(arrayData.list1);
            let names = getNames(arrayData.list1);
            console.log('list1 =', list1, names);
            

        })

        return {
            modA,
            modB,
            arrayData,


            fun1,
            fun2,
            requestObj,
        }
    },
});
</script>
<style lang="scss" scoped>
    .box-view {
        background-color: white;
        font-size: 16px;
        color: #121212;
    }
</style>
